<template>
    <div class="home">
        <!-- TopBar BEGIN -->
        <TopBar/>
        <!-- TopBar END -->

        <!-- Header BEGIN -->
        <Header/>
        <!-- Header END -->

        <div class="home-hero" style="margin-bottom: 26px">
            <div class="container">
                <div class="swiper" style="height: 460px;background: rgba(213,230,251,1)"></div>

                <div class="home-hero-sub" style="margin-top: 14px">
                    <el-row :gutter="20">
                        <el-col :span="5"><div style="height: 170px;background-color: #5f5750"></div></el-col>
                        <el-col :span="15"><div></div></el-col>
                    </el-row>
                </div>
            </div>
        </div>

        <div class="page-main" style="background-color: #f5f5f5">
            <div class="container">
                <div class="" style="height: 460px;background: rgba(213,230,251,1)"></div>
            </div>
        </div>

    </div>
</template>

<script>
    // @ is an alias to /src
    //import HelloWorld from '@/components/HelloWorld.vue'
    import TopBar from '@/components/TopBar.vue'
    import Header from '@/components/Header.vue'
    export default {
        name: 'Home',
        components: {
            TopBar,
            Header
            //HelloWorld
        }
    }
</script>

<style>
    .el-header {
        position: relative;
        padding: 0;
    }

    .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }
</style>
